<template>
  <div ref="ele" class="time-line-tripple">333</div>
</template>

<script>
/* eslint-disable */

import echarts from "echarts";
import Debug from "debug";
let dbg = Debug("TrippleViewTimeLine.vue");
dbg.enabled = true;

let the_chart = null;

export default {
  name: "TrippleViewTimeLine",
  data: function() {
    return {
      null_chart: echarts.init(document.createElement("null"))
    };
  },
  props: {
    lineconfig: {
      type: Object
    }
  },
  computed: {
    chart() {
      return the_chart ? the_chart : this.null_chart;
    },
    starterId() {
      return this.$store.state.starterId;
    },
    font_size() {
      return 12;
    },
    opt_yAxises() {
      return _.flatten(
        this.opt_grids.map((e, i) => {
          return [
            {
              name: "Voltage /V",
              type: "value",
              min: 0,
              max: 30,
              offset: 75,
              position: "right",
              axisLine: {
                lineStyle: {
                  color: this.lineconfig.colors["u30"]
                }
              },
              comment: "V" //用于后面找这个轴
            },
            {
              name: "Speed /RPM",
              type: "value",
              min: 0,
              max: 1500,
              position: "left",
              axisLine: {
                lineStyle: {
                  color: this.lineconfig.colors["speed"]
                }
              },
              comment: "RPM"
            },
            {
              name: "Current /A",
              type: "value",
              min: 0,
              max: 1500,
              position: "right",
              offset: 0,
              axisLine: {
                lineStyle: {
                  color: this.lineconfig.colors["i30"]
                }
              },
              comment: "A"
            },
            {
              name: "POWER /W",
              type: "value",
              min: 0,
              max: 8000,
              position: "left",
              offset: 75,
              axisLine: {
                lineStyle: {
                  color: this.lineconfig.colors["water"]
                }
              },
              comment: "W"
            }
          ].map(e => {
            e = {
              ...e,
              gridIndex: i,
              splitLine: {
                show: false
              }
            };
            return e;
          });
        })
      );
    },
    opt_legend() {
      return {
        show: true,
        right: 60,
        bottom: 40,
        orient: "vertical",
        type: "scroll",
        itemHeight: this.font_size,
        textStyle: {
          fontSize: this.font_size
        },
        data: _.uniqBy(this.opt_serieses, e => e["name"]).map(e => {
          return {
            name: e["name"],
            icon: "roundRect"
          };
        })
      };
    },
    opt_grids() {
      return [
        {
          top: 40
        },
        {
          top: 270
        },
        {
          bottom: 60
        }
      ].map(e => {
        e = {
          ...e,
          left: "8%",
          right: "18%",
          height: 160,
          // containLabel: true,
          show: false
        };
        return e;
      });
    },
    opt_xAxises() {
      let vue = this;
      return this.opt_grids.map((e, i) => {
        return {
          type: "category",
          gridIndex: i,
          data: _.range(0, 3001),
          axisTick: {
            interval: 499,
            alignWithLabel: true,
            lineStyle: {
              color: "#333"
            }
          },
          name: "",
          nameGap: 23,
          nameLocation: "center",
          axisLabel: {
            interval: 499
          },
          offset: 5,
          axisLine: {
            onZero: false,
            lineStyle: {}
          }
        };
      });
    },
    opt_serieses() {
      return [];
    },
    opt_echarts() {
      return {
        backgroundColor: "#FFF",
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left"
          },
          axisPointer: {
            type: "cross"
          },
          formatter: params => {
            let res = "&nbsp;&nbsp;&nbsp;time : " + params[0].data[0] + "ms";
            // debugger
            params.forEach(v => {
              res += "<br>" + v.marker + v.seriesName + " : " + v.data[1];
            });
            return res;
          }
        },
        xAxis: this.opt_xAxises,
        grid: this.opt_grids,
        yAxis: this.opt_yAxises,
        series: this.opt_serieses,
        legend: this.opt_legend,
        dataZoom: {
          type: "inside",
          xAxisIndex: [0, 1, 2]
          // startValue: 0,
          // endValue: 1000
        }
      };
    }
  },
  mounted() {
    the_chart = echarts.init(this.$refs["ele"]);
    this.chart.setOption(this.opt_echarts);
  },
  watch: {
    opt_echarts(val) {
      try {
        this.chart.clear();
        this.chart.setOption(val);
      } catch (e) {
        console.error(e);
      }
    },
    starterId() {
      try {
        this.chart.clear();
        this.chart.setOption(this.opt_echarts);
      } catch (e) {}
    }
  },
  methods: {
    /**
     * @api public
     * @param {Array<{gridIndex:Number,test_id:Number}>} raw_xAxis
     * @param {Array<{gridIndex:Number,test_id:Number,comment:String}>} raw_yAxises
     * @param {Array<{name:String,test_id:Number,xAxisIndex:Number}>} raw_series
     */
    setOpts(raw_xAxis, raw_yAxises, raw_series, func = () => {}) {
      setTimeout($ => {
        // debugger;
        func(raw_xAxis, raw_yAxises, raw_series, this);
      }, -1);
    }
  }
};
</script>

<style>
.time-line-tripple {
  width: 1526px;
  height: 712px;
  background-color: white;
}
</style>
